<script setup> 
import {ref} from 'vue'
import channelSelect from '@/views/article/components/channelSelect.vue'
import {articleGetListService,artDelService} from '@/api/article'
import {formatTime} from '@/utils/format'
import articleEdit from './components/articleEdit.vue'

//文章列表
const articleList = ref([])
//总条数
const total = ref(0)

const params = ref({
    pagesize:3,
    pagenum:1,
    cate_id:"",
    state:''
})

//加载
const loading = ref(false)


//通过参数获取文章列表
const getArticleList = async()=>{
    loading.value=true
    const res = await articleGetListService(params.value)
    articleList.value = res.data.data
    total.value = res.data.total
    loading.value=false
}
getArticleList()
const cateId = ref(57210)

const onSizeChange=(size)=>{
    // console.log(`当前条数${size}`);
    //重新渲染
    params.value.pagenum = 1
    params.value.pagesize = size
    getArticleList()
}
const onCurrentChange=(page)=>{
    // console.log(`当前页码${page }`);
    params.value.pagenum = page
    getArticleList()
}

//搜索
const search = ()=>{
    //重置页码
    params.value.pagenum = 1
    getArticleList()
}

//重置
const reset = ()=>{
    params.value.pagenum = 1
    params.value.cate_id=''
    params.value.state=''
    getArticleList()
}

//
const articleEditRef = ref()

//添加文章 传入空参表明是添加
const addArticle = ()=>{
    articleEditRef.value.open({})
}

//传入信息表明是修改
const editAticle=(row)=>{
    articleEditRef.value.open(row)
}
const articleDelete= async(row)=>{
    await ElMessageBox.confirm('你确认删除该文章信息吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }
)
  await artDelService(row.row.id)
  ElMessage({ type: 'success', message: '删除成功' })
  getArticleList()
}

const onSuccess=(type)=>{
    if(type==='add'){
        //添加渲染最后一页
        const lastpage = Math.ceil((total.value+1)/params.value.pagesize)
        params.value.pagenum = lastpage
    }
    getArticleList()
}


</script>

<template>
<page-container title="文章管理">
    <template #extra>
        <el-button @click="addArticle" type="primary">
            添加文章
        </el-button>
    </template>

    <!-- 表单 -->
    <el-form :inline="true">
        <el-form-item label="文章分类：">
            <channelSelect v-model="params.cate_id"></channelSelect>
        </el-form-item>
        <el-form-item label="发布状态：" >
            <el-select v-model="params.state"  style="width: 100px">
                <el-option label="已发布" value="已发布"></el-option>
                <el-option label="草稿" value="草稿"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
        </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="articleList" style="width: 100%" v-loading="loading">
        <el-table-column label="文章标题" width="180" prop="title">
            <template #default="{row}">
                <el-link type="primary" :underline="false">{{row.title}}</el-link>
            </template>
        </el-table-column>
        <el-table-column label="分类" width="150" prop="cate_name">
        </el-table-column>
        <el-table-column label="发布时间" width="400" prop="pub_date">
            <template #default="{row}">
                {{formatTime(row.pub_date)}}
            </template>
        </el-table-column>
        <el-table-column label="状态" width="300" prop="state">
        </el-table-column>
        <el-table-column label="操作" width="200">
            <template #default="row">
                <el-button 
                size="small"
                @click="editAticle(row)"
                >
                    编辑
                </el-button>
                <el-button
                size="small"
                type="danger"
                @click="articleDelete(row)"
                >
                    删除
                </el-button>
            </template>
        </el-table-column>
  </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="params.pagenum"
      v-model:page-size="params.pagesize"
      :page-sizes="[2,3,5,10]"
      :background="true"
      layout="total, sizes,prev, pager, next, jumper"
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
    />

    <!-- 抽屉 -->
    <articleEdit ref="articleEditRef" @success='onSuccess'></articleEdit>
</page-container>
</template>

<style scoped>

</style>